<template>
    <div id="mydiv">
        <div class="content" v-for="(item,index) in orderList" :key="index">
            <div class="title">
                <span>{{item.vendorname}}</span>
                <span>{{item.liststate}}</span>
            </div>
            <div style="position: relative;">
                <scroll-view class="imgcontent" scroll-x="true" >
                    <div v-for="(item1,index1) in item.listgoods" :key="index1" class="scrollitem">
                        <div class="img"><image :src="item1.goodsimg" alt=""></div>
                        <p class="goodsname">{{item1.goodsname}}</p>
                    </div>
                    <div class="scrollitem kongbai"></div>
                    <!-- <div class="goodsnumber"></div> -->
                </scroll-view>
                <div class="goodsnumber">
                    <p>共{{item.listnumber}}件 </p>
                    <p>￥{{item.listprice}}</p>
                </div>
            </div>
            
            <div class="state">
                <button v-if="item.liststate==='已完成'">评价</button> 
                <button v-if="item.liststate==='待付款'">去付款</button>
                <button v-else>再来一单</button>
            </div>
        </div>
    </div>
    
     
</template>

<script>
import * as api from '../../utils/api.js'
export default {
    data() {
        return {
            orderList:[]
        }
    },
    onLoad(){
        // console.log(123);
        let _this=this
        uni.request({
            url:api.orderlist,
            data:{},
            method: 'get',
            complete:({data})=>{
                console.log(data);
                this.orderList=data.data
            }
        })  

    },
    methods: {
        
    },

}
</script>

<style>
/* pages{
    background-color: #F2F5F7;

} */
.kongbai{
    width: 100rpx;
   /* border: 1px solid red; */
}
.goodsnumber{
    width: 150rpx;
    height: 185rpx;
    /* border: 1px solid red; */
    position: absolute;
    right: 0;
    top: 0;
    /* opacity: 0.9; */
    background-color: rgba(255, 255, 255,0.5);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content:center ;
    
}
#mydiv{
    width: 100%;
    background-color: #F2F5F7;
    padding: 5px 0 ;
}
.scrollitem{
    display: inline-block;
    margin-left: 10px;
}
.content{
    background-color: white;
    /* height: 50px; */
    width: 95%;
    padding: 5px 0;
    margin: 20rpx auto;
    /* border: 1px solid red; */
    border-radius: 8px;

}
/* .content>div{
    margin: 10px 0;
} */
.title{
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    margin-top: 20px;
}
.img{
    /* border: 1px solid red; */
    width: 150rpx;
    height: 150rpx;
    border-radius: 10px;
    overflow: hidden;
}
.goodsname{
    overflow: hidden;
    display: inline-block;
    width: 150rpx;
    text-overflow:ellipsis;
    height: 35rpx;
    line-height: 35rpx;
}
.img image{
    width: 100%;
    height: 100%;
}
.imgcontent{
    width: 90%;
    white-space: nowrap;
}
.imgcontent>div:last-child{
    margin-right: 150rpx;
}
.state{
    /* display: flex;
    justify-content: right; */
    margin-top: 10px;
    margin-bottom: 10px;
    
}
.state::after{
    content: '';
    display: block;
    clear: both;
}
.state button{
    margin-right: 10px;
    /* display: inline-block; */
    float: right;
    height: 25px;
    line-height: 18px;
    border: 1px solid grey;
    overflow: hidden;
    background-color: white;
    /* color: white;  */
    padding:2px 10px;
    /* border-radius: 15px; */
}
.uni-scroll-view ::-webkit-scrollbar {
	 /* 隐藏滚动条，但依旧具备可以滚动的功能 */
	 display: none;
	 width: 0;
	 height: 0;
	 color: transparent;
	 background: transparent;
	}
::-webkit-scrollbar {
	 display: none;
	 width: 0;
	 height: 0;
	 color: transparent;
	 background: transparent;
	}

</style>